<template>
    <div>
        <div style="width: 100%; height: 40px">
            <mt-header fixed style="background-color: #182ead; box-shadow: 2px 2px 1px #fff">
                <router-link to="/" slot="left">
                    <mt-button icon="back">主页</mt-button>
                </router-link>
                <router-link to="Hatalogue" slot="right">
                    <mt-button icon="">目录</mt-button>
                </router-link>
            </mt-header>
        </div>
        <template>
            <div    ref="pdf"
                    class="pdf"
                    :style="{
        width: scale + '%',
        transform: 'rotate(' + pageRotate + 'deg)',
      }">
                <pdf v-for="item in numPages" :key="item" :src="src" :page="item"/>
            </div>
        </template>
        <mt-tabbar fixed v-model="selected">
            <mt-tab-item id="tab1" >
                    <img slot="icon" src="../statics/img/da.png">
                    <div @click="scaleD">
                        放大
                    </div>
            </mt-tab-item>
            <mt-tab-item id="tab2" >
                <div @click="scaleX">
                    缩小
                </div>
                <img slot="icon" src="../statics/img/xiao.png">
            </mt-tab-item>
            <mt-tab-item id="tab3" >
                <div @click="reset">
                    还原
                </div>
                <img slot="icon" src="../statics/img/huanyuan.png">
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import { Toast } from 'mint-ui';
    export default {
        components:{
            pdf,
            Toast
        },
        watch: {
            dochref(val) {
                this.pageRotate = 0
                this.scale = 100
            }
        },
        created() {
            this.pdfId = this.$route.query.pdfId
            switch (this.pdfId) {
                case 'a': this.src = '/fire-control/pdf/a.pdf'
                    break;
                case 'b': this.src = '/fire-control/pdf/b.pdf'
                    break;
                case 'c': this.src = '/fire-control/pdf/c.pdf'
                    break;
                case 'd': this.src = '/fire-control/pdf/d.pdf'
                    break;
                case 'e': this.src = '/fire-control/pdf/e.pdf'
                    break;
                case 'f': this.src = '/fire-control/pdf/f.pdf'
                    break;
                case 'g': this.src = '/fire-control/pdf/g.pdf'
                    break;
                case 'h': this.src = '/fire-control/pdf/h.pdf'
                    break;
                case 'i': this.src = '/fire-control/pdf/i.pdf'
                    break;
                case 'j': this.src = '/fire-control/pdf/j.pdf'
                    break;
                case 'k': this.src = '/fire-control/pdf/k.pdf'
                    break;
                default: console.log('报错了')
            }
            this.src = pdf.createLoadingTask(this.src)
            this.loadPdfHandler()
        },
        name: "PdfView",
        data() {
            return {
                pdfId: null,
                src: '', // pdf文件地址
                numPages: "",
                pageRotate: 0,
                scale: 100,
                selected: ''
            }
        },
        methods: {
            /**
             * 加载pdf文件
             */
            loadPdfHandler() {
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages;
                });
            },

            /**
             * 放大方法
             */
            scaleD() {
                this.scale += 5
                Toast({
                    message: `${this.scale}%`,
                    duration: 2000
                });
            },

            /**
             * 缩小方法
             */
            scaleX() {
                if (this.scale == 100) {
                    return
                }
                this.scale += -5
                Toast({
                    message: `${this.scale}%`,
                    duration: 2000
                });
            },

            /**
             * 重制大小
             */
            reset() {
                this.scale = 100
                Toast({
                    message: `${this.scale}%`,
                    duration: 2000
                });
            }
        }
    }
</script>

<style scoped>

</style>
